<template>
    <div class="user-info-form">
        <div class="user-info-form-item" v>
            <span>昵称：</span>
            <el-input v-model="formData.nickname" />
        </div>
        <div class="user-info-form-item">
            <span>性别：</span>
            <el-radio-group v-model="formData.sex">
                <el-radio value="1">男</el-radio>
                <el-radio value="0">女</el-radio>
            </el-radio-group>
        </div>
        <div class="user-info-form-item">
            <span>电话：</span>
            <el-input v-model="formData.phone" />
        </div>
        <div class="user-info-form-item">
            <span>邮箱：</span>
            <el-input v-model="formData.email" />
        </div>
        <div class="user-info-form-item">
            <span>描述：</span>
            <el-input v-model="formData.description" type="textarea" placeholder="50字以内！" />
        </div>
        <div class="user-info-form-btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="refreshForm">刷新</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive,onBeforeMount } from 'vue'
import { useUserStore } from '@/store/useUserStore'
import request from '@/router/request'
import {ElMessage} from 'element-plus'
import type JsonResult from '@/interfaces/JsonResult'

interface UserInfo{
  id:number
  userId:number
  nickname:string
  sex:string
  phone:string
  email:string
  description:string
  modified_time:string

}

const userStore = useUserStore()

// 用户信息表单数据
const formData = reactive({
  nickname:'',
  sex:"",
  phone:'',
  email:'',
  description:'',
})

onBeforeMount(()=>{
  getUserInfo()
})

const submitForm = async () => {
  // 数据校验，先不做
  // const response = await request.get("/test/principal")
  ElMessage.success("操作成功，此功能还未开放")
}

const refreshForm = () => {
  getUserInfo()
}

// 获取用户信息
const getUserInfo = async ()=>{
// 如果是已登录状态，尝试获取用户信息
if(userStore.loginState==true){
    try{
      const response:JsonResult = await request.get("/admin/user/userinfo")
      if(response){
        if(response.state==200){
          const userinfo:UserInfo = response.data
          formData.nickname = userinfo.nickname
          formData.sex = userinfo.sex
          formData.phone = userinfo.phone
          formData.email = userinfo.email
          formData.description = userinfo.description
        }else{
          ElMessage.warning(response.message)
        }
        
      }else{
        ElMessage.warning("当前用户并未录入用户信息")
      }
    }catch(error:any){
      ElMessage.error(error)
    }
  }
}
</script>

<style scoped>
.user-info-form{
  margin: 5px;
}
.user-info-form-item{
  display: flex;
  align-items: center;
}
.user-info-form-btn{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>